<!--产品管理页面-->
<template>
  <div>
    <el-row :gutter="10">
      <!--关键词查找,找到相应的关键词回显-->
     <el-col :span="4"><el-input v-model="input" placeholder="查询内容" style="float: left;margin-top: 6px;"></el-input></el-col>
      <!--新增按钮,跳转到发布页面-->
     <el-col :span="6"><el-button type="primary" style="margin: 10px;border-radius: 10px;float: left;" @click="dialogVisible=true" ><el-icon><Plus /></el-icon>新增</el-button> </el-col>
    </el-row>
  </div>

  <!--:header-row-style修改表头颜色,:header-cell-style修改表头背景，
  textAlign:'center'内容居中 height="600"表格固定显示600px的内容-->
  <el-table :data="productArr" :header-cell-style="{background:'#4ea0ff',textAlign:'center'}"
            :header-row-style="{color:'white'}"
            :cell-style="{textAlign:'center'}"
            height="550"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
    <el-table-column type="selection" label="序号" width="50px" ></el-table-column>
    <el-table-column type="index" label="序号" width="100px" ></el-table-column>
    <el-table-column prop="name" label="房屋格局" width="100px"></el-table-column>
    <el-table-column prop="type" label="租房类别" width="100px"></el-table-column>
    <el-table-column label="发布状态" width="120px">
      <template #default="scope">
        <el-switch v-model="scope.row.releaseStatus"
                   :active-value="1"
                   :inactive-value="0" @change="changeReleaseStatus(scope.row.id,scope.row.status)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="推荐状态" width="120px">
      <template #default="scope">
        <el-switch v-model="scope.row.commendationStatus"
                   :active-value="1"
                   :inactive-value="0" @change="changeCommendationStatus(scope.row.id,scope.row.status)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column  label="封面" width="200px">
      <template #default="scope">
        <img :src="scope.row.imgUrl" style="width: 100px;">
      </template>
    </el-table-column>
    <el-table-column prop="viewCount" label="浏览量" width="100px"></el-table-column>
    <el-table-column prop="createTime" label="更新时间" width="200px"></el-table-column>
    <!--产品修改和删除-->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button  :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle  @click="del(scope.$index,scope.row)"/>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 15px;">
    <el-row :gutter="10">
     <el-col :span="6">
       <el-row :gutter="10">
        <el-col :span="6" style="padding-top: 5px;">批量操作:</el-col>
        <el-col :span="6"><el-button @click="delArray()" :disabled="ids.length === 0" ><el-icon><Delete /></el-icon>批量删除</el-button></el-col>
       </el-row>
       </el-col>
    </el-row>

  </div>

</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

// 选中数组
 const ids=ref([]) ;


const handleSelectionChange=(selection)=>{
//selection中并未保存当前行的行号,但是可以每删除一次就重新加载一次页面，或者可能还会有更好的解决方法
  console.log("多选框选中数据");
  console.log(selection);
  ids.value.push(selection.id) ;// 需要根据数据情况调整id名称
  console.log(ids.value);
}
//批量删除按钮
 const delArray= ()=> {
  if (confirm('您确定要删除吗？')){
    ids.value.forEach=(i)=>{
      productArr.value.splice(i,1);
    }
    ids.value='';
  }

 }
//行删除信息
const del=(i,row)=>{
  if (confirm('您确定要删除吗？')){
    productArr.value.splice(i,1);
    ElMessage.success('删除成功！');
  }
}
//改变推荐状态按钮
const changeCommendationStatus=()=>{

}
//改变发布状态按钮
const changeReleaseStatus=()=>{

}
//产品管理数组,需要返回id
const productArr=ref([
  {name:'四居室',type:'整租',releaseStatus:'0',commendationStatus:'0',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'},
  {name:'三居室',type:'合租',releaseStatus:'0',commendationStatus:'0',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'},
  {name:'二居室',type:'出售',releaseStatus:'0',commendationStatus:'0',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'},
  {name:'二居室',type:'出售',releaseStatus:'0',commendationStatus:'0',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'},
  {name:'二居室',type:'合租',releaseStatus:'1',commendationStatus:'0',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'},
  {name:'二居室',type:'合租',releaseStatus:'1',commendationStatus:'1',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'},
  {name:'二居室',type:'合租',releaseStatus:'1',commendationStatus:'1',imgUrl:'/picture/1.jpg',viewCount:'800',createTime:'2024-3-29 12:10:10'}
]);

</script>

<style scoped>

</style>